<template>
  <div class="tech-page">
    <a-row :gutter="20">
      <!-- 左侧文章列表 -->
      <a-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
        <a-card>
          <div class="bread-box">
            <!-- 面包屑导航 -->
            <a-breadcrumb>
              <a-breadcrumb-item
                ><router-link to="/home">首页</router-link></a-breadcrumb-item
              >
              <a-breadcrumb-item>技术</a-breadcrumb-item>
              <a-breadcrumb-item v-if="articleTypeName">{{articleTypeName}}</a-breadcrumb-item>
            </a-breadcrumb>
          </div>
          <keep-alive>
            <ArticleList
              :articleTypeParm="articleTypeParm"
              :key="articleTypeParm"
            ></ArticleList>
          </keep-alive>
        </a-card>
      </a-col>
      <!-- 右侧搜索导航 -->
      <a-col :xs="0" :sm="0" :md="0" :lg="6" :xl="6">
        <a-card class="cate-card">
          <div class="cate-title">
            <a-icon type="bulb" />
            <span style="font-weight: bold; margin-left: 5px">分类导航</span>
          </div>
          <div class="cate-list-box">
            <a-list bordered :data-source="cateListData">
              <a-list-item
                slot="renderItem"
                slot-scope="item"
                @click="itemClick(item)"
              >
                {{ item.name }}
              </a-list-item>
            </a-list>
          </div>
        </a-card>
        <Author></Author>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import ArticleList from "../ArticleList/ArticleList";
import Author from "../Author/Author";
export default {
  data() {
    return {
      articleListData: [],
      cateListData: [],
      //分类参数
      articleTypeParm: 0,
      articleTypeName: ''
    };
  },
  components: {
    ArticleList,
    Author,
  },
  mounted() {
    // 获取分类数据
    this.getCateList();
  },
  methods: {
    // 请求分类列表
    async getCateList() {
      try {
        const { data: res } = await this.$http.get("type");
        this.cateListData = res.data;
        console.log("全部分类", this.cateListData);
      } catch (e) {
        console.log(e);
      }
    },
    itemClick(item) {
      this.articleTypeParm = item.id;
      this.articleTypeName = item.name
    },
  },
};
</script>

<style lang="less" scoped>
.tech-page {
  padding: 63px 15px 0 15px;
  max-width: 1200px;
  margin: 0 auto;
}
.bread-box {
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}
.cate-card {
  margin-bottom: 10px;
}
.cate-list-box {
  box-shadow: 2px 2px 2px #888888;
  margin-top: 15px;
  li {
    &:hover {
      background-color: rgba(204, 204, 204, 0.8);
      color: #1890ff;
      font-weight: bold;
      cursor: pointer;
    }
  }
}
@media screen and (max-width: 768px) {
  .tech-page {
    padding: 0 15px;
  }
}
</style>